<template>
  <el-dialog
    v-el-drag-dialog
    title="配送详情"
    :visible.sync="visible"
    append-to-body
    width="1024px"
  >
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      :immediate-fetch="false"
      @fetch="fetchData"
    />
  </el-dialog>
</template>

<script>
  import { queryDistributionPlanDetailList } from '@/api'

  export default {
    name: 'peisongDetail',
    data() {
      return {
        visible: false,
        row: {},
        tableData: {
          total: 0,
          column: [
            { label: '客户编号', prop: 'csmCode' },
            { label: '客户名称', prop: 'csmName' },
            { label: '客户电话', prop: 'csmPhone', width: 120 },
            { label: '地址', prop: 'csmAddress', width: 200 },
            { label: '配送机构', prop: 'orgName', width: 150 },
            { label: '计划执行状态', prop: 'status', width: 120, formatter: this.statusFormat },
            { label: '未执行原因', prop: 'remark', width: 150 }
          ],
          data: []
        }
      }
    },
    methods: {
      open(temp) {
        this.row = temp
        this.fetchData({ currentPage: 1, pageSize: 20 })
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          planCode: this.row.planCode,
          currentPage,
          pageSize
        }
        const res = await queryDistributionPlanDetailList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      statusFormat(row, cloumn) {
        const val = row[cloumn.property]
        var map = ['', '未执行', '已执行']
        return map[val] || ''
      }
    }
  }
</script>
